<template>
	<view class="passwordLogin">
		<u-navbar back-icon-color="#000" :back-text-style="{color: '#000'}" back-text="手机号登陆" />
		<view class="content">
			<view class="inputs">
				<input type="password" placeholder="请输入密码" v-model="loginParsms.password" />
				<view class="forget" @click="jumpToForgetPassword">忘记密码?</view>
			</view>
			<commonBtn :style="{ backgroundColor: !loginParsms.password ? '#72bfc4' : '#07a0aa' }" :title="loginBtn.title" @click="login"></commonBtn>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import commonBtn from '@/components/commonBtn/commonBtn.vue';
import { loginByPhone } from '@/api/account.js';
export default {
	data() {
		return {
			loginParsms: {
				countrycode: '',
				phone: '',
				password: ''
			},
			loginBtn: {
				title: '登陆',
				permission: true
			}
		};
	},
	components: {
		components: { uniNavBar, uniIcons, commonBtn }
	},
	onLoad(e) {
		this.loginParsms = {
			countrycode: e.countrycode,
			phone: e.phone
		};
	},
	methods: {
		jumpToForgetPassword() {
			uni.navigateTo({
				url: '/pages/login/mobilephoneLogin/inputPassword?phone=' + this.loginParsms.phone +'&countryCode=' + this.loginParsms.countrycode+'&from=forget'
			});
		},
		login() {
			if (this.loginBtn.permission && this.loginParsms.password) {
				this.loginBtn.title = '登陆中...';
				this.loginBtn.permission = false;
				loginByPhone(this.loginParsms)
					.then(res => {
						this.loginBtn.title = '登陆';
						this.loginBtn.permission = true;
						//跳转
						if (res.code == 200) {
							uni.navigateTo({
								url: '/pages/main/main'
							});
						} else {
							uni.showToast({
								title: res.msg || res.message,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						this.loginBtn.title = '登陆';
						this.loginBtn.permission = true;
					});
			}
		},
		handleBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.passwordLogin {
	/deep/.uni-navbar--border {
		border: none;
	}
	.content {
		padding: 20px;
		box-sizing: border-box;
		.inputs {
			display: flex;
			align-items: center;
			width: 100%;
			height: 46px;
			border-bottom: 1px #ccc solid;
			// padding-top: 22px;
			padding-right: 2px;
			// margin-bottom: 22px;
			margin: 11px 0;
			> input {
				flex: 1;
				height: 100%;
				font-size: 16px;
			}
			.forget {
				width: 80px;
				color: #0c72c3;
				text-align: center;
			}
		}
	}
}
</style>
